<template>
    <section class="food_container">
        <section class="menu_container">
            <section class="menu_left" >
                <ScrollView :click="true" ref="leftMenu">
                    <ul>
                        <li v-for="(item,index) in menuList" :key="item.id" 
                            class="menu_left_li"
                            :class="{activity_menu:index == menuIndex}"
                            @click="chooseMenu(index)">
                            <img :src="getImgPath(item.icon_url)" v-if="item.icon_url">
                            <span>{{item.name}}</span>
                            <span class="category_num" v-if="categoryNum[index]">{{categoryNum[index]}}</span>
                        </li>
                    </ul>
                </ScrollView>
            </section>
            <section class="menu_right">
                <ScrollView :click="true" 
                    :probeType="3" 
                    ref="rightFoodList" 
                    :listenScroll="true"
                    @scroll="foodListScroll"
                    @scrollEnd="foodListScrollEnd">
                    <ul>
                        <li v-for="item in menuList" :key="item.id">
                            <header class="menu_detail_header">
                                <section class="menu_detail_header_left">
                                    <strong class="menu_item_title">{{item.name}}</strong>
                                    <span class="menu_item_description">{{item.description}}</span>
                                </section>
                                <section class="menu_detail_header_right"></section>
                                <p class="description_tip"></p>
                            </header>
                            <section class="menu_detail_list" v-for="food in item.foods" :key="food.id">
                                <router-link to="/" class="menu_detail_link">
                                    <section class="menu_food_img">
                                        <img :src="imgBasePath+food.image_path" alt="">
                                    </section>
                                    <section class="menu_food_description">
                                        <h3 class="food_description_head">
                                            <strong class="description_foodname">{{food.name}}</strong>
                                            <ul v-if="food.attributes.length" class="attributes_ul">
                                                <li v-for="(attribute, foodindex) in foodAttrs(food.attributes)" :key="foodindex"
                                                    :style="{borderColor:attribute?'#' + attribute.icon_color:'transparent',
                                                            color: attribute.icon_name == '新'? '#fff' : '#' + attribute.icon_color}"
                                                        :class="{attribute_new: attribute.icon_name == '新'}">
                                                    <span 
                                                        >
                                                        {{attribute.icon_name == '新'? '新品':attribute.icon_name}}
                                                    </span>
                                                </li>
                                            </ul>
                                        </h3>
                                        <p class="food_description_content">{{food.description}}</p>
                                        <p class="food_description_sale_rating">
                                            <span>月售{{food.month_sales}}份</span>
                                            <span>好评率{{food.satisfy_rate}}%</span>
                                        </p>
                                        <p v-if="food.activity" class="food_activity">
                                            <span :style="{color: '#' + food.activity.image_text_color,
                                                            borderColor:'#' +food.activity.icon_color}">
                                                {{food.activity.image_text}}
                                            </span>
                                        </p>
                                    </section>
                                </router-link>
                                <footer class="menu_detail_footer">
                                    <section class="food_price">
                                        <span>￥</span>
                                        <span>{{food.specfoods[0].price}}</span>
                                        <span v-if="food.specifications.length">起</span>
                                    </section>
                                    <!-- BuyCart -->
                                    <AddCart :food="food" 
                                        :shopId="shopId"
                                        @showChooseList="showChooseList" 
                                        @showReduceTip="showReduceTip" 
                                        @addToCart="addToCartFn"
                                        @reduceCart="reduceCartFn"></AddCart>
                                </footer>
                            </section>
                        </li>
                    </ul>
                </ScrollView>
            </section>
        </section>
        <SpecsView :shopId="shopId" :food="chooseFood" @close="closeSpecView"></SpecsView>
        <transition name="fade">
            <p class="show_delete_tip" v-if="showDeleteTip">多规格商品只能去购物车删除哦</p>
        </transition>
    </section>
</template>

<script>
import {imgBasePath} from '@src/utils/config'
import SpecsView from './ShowSpecs'
import AddCart from './AddCart';
import ScrollView from '@src/components/common/Scroll'
import {mapState,mapActions} from 'vuex'
import { setTimeout } from 'timers';
export default {
    props:{
        menuList:{
            type:Array,
            default(){return null}
        },
        shopId:String,
    },
    components:{
        AddCart,
        SpecsView,
        ScrollView
    },
    computed:{
        ...mapState(['cartList']),
        //当前商店购物信息
        shopCart(){
            return {...this.cartList[this.shopId]}
        }
    },
    data(){
        return {
            imgBasePath,
            menuIndexChange:true, // 滚动优化
            menuIndex:0,    // 选中的 左侧类别
            chooseFood:null, // buyCart选择的 food
            categoryNum:[], // 左侧类别列表中每个类别中选中的个数
            totalPrice: 0, //总共价格
            listHeight:[],
            showDeleteTip:false
        }
    },
    mounted(){
        this.$nextTick(()=>{
            this.initCategoryNum();
            this.getFoodListHeight();
        })
    },
    watch:{
        shopCart(){
            this.initCategoryNum();
        }
    },
    methods:{
        ...mapActions(['addCart','reduceCart']),
        chooseMenu(index){
            this.menuIndex=index;
            // 联动， menu->list
            const listContainer = this.$refs.rightFoodList;
            this.menuIndexChange=false;
            listContainer.scrollTo(0,-this.listHeight[index])
        },
        foodAttrs(arr){
            return arr.filter((item)=>{
                if(item && item.icon_color){
                    return item;
                }
            })
        },
        showChooseList(food){
            this.chooseFood=food;
        },
        closeSpecView(){
            this.chooseFood=null;
        },
        showReduceTip(){
            this.showDeleteTip=true;
            setTimeout(()=>{
                this.showDeleteTip=false;
            },3000)
        },
        // 点击AddCart组件 加号 
        addToCartFn(food,el){
            this.addCart(food);
            this.$emit('showMoveDot',el);
        },
        // 点击AddCart组件 减号
        reduceCartFn(food){
            this.reduceCart(food);
        },
        //初始化和 shopCart变化时候。重新计算 总价，购物车，类别中food数
        initCategoryNum(){
            let newArr = [];
            let cartFoodNum = 0;
            this.totalPrice = 0;  // 
            let cartFoodList = [];//购物车列表
            this.menuList.forEach((item,index)=>{
                if(this.shopCart && this.shopCart[item.id]){
                    // 类别id存在于 shopCart；
                    let num=0;
                    Object.keys(this.shopCart[item.id]).forEach((itemid)=>{
                        Object.values(this.shopCart[item.id][itemid]).forEach(food=>{
                            if(food){
                                this.totalPrice += food.num*food.price;
                                num+=food.num;
                                let cartFood={};
                                cartFood.category_id = food.category_id;
                                cartFood.item_id = food.item_id;
                                cartFood.food_id = food.food_id;
                                cartFood.id = food.food_id;
                                cartFood.num = food.num;
                                cartFood.price = food.price;
                                cartFood.name = food.name;
                                cartFood.specs = food.specs;
                                cartFood.packing_fee = food.packing_fee;
                                cartFood.sku_id = food.sku_id;
                                cartFood.stock = food.stock;
                                cartFoodList.push(cartFood);
                            }
                        })
                    })
                    newArr[index]=num;
                }else{
                    newArr[index]=0;
                }
            })
            this.categoryNum=[...newArr];
            this.totalPrice = this.totalPrice.toFixed(2);
            this.$emit('cart',{cartList:cartFoodList,totalPrice:this.totalPrice})
        },
        //获取食品列表的高度，存入shopListTop
        getFoodListHeight(){
            const listContainer = this.$refs.rightFoodList.$refs.swrapper;
            let height=0;
            this.listHeight.push(0)
            if(listContainer){
                const listArr = Array.from(listContainer.children[0].children);
                listArr.forEach(e=>{
                    height+=e.clientHeight;
                    this.listHeight.push(height)
                })
            }
        },
        foodListScroll(pos){
            if(this.menuIndexChange){
                this.listHeight.forEach((item,index)=>{
                    if(Math.abs(pos.y)>=item && Math.abs(pos.y)<=this.listHeight[index+1]){
                        this.menuIndex=index;
                    }
                })
            }
        },
        foodListScrollEnd(){
           this.menuIndexChange=true;
        }
        
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.food_container{
    flex: 1;
    overflow-y: hidden;
    display: flex;
    span{
        font-family: 'Helvetica Neue',Tahoma,Arial;
    }
}
.menu_container{
    flex: 1;
    display: flex;
    overflow-y: hidden;
    position: relative;
    .menu_left{
        width: 3.8rem;
        .menu_left_li{
            padding: 0.7rem 0.3rem;
            border-bottom: 0.025rem solid #ededed;
            border-left: 0.15rem solid #f8f8f8;
            box-sizing: border-box;
            position: relative;
            img{
                @include wh(.5rem, .6rem);
            }
            span{
                @include sc(.6rem, #666);
            }
            .category_num{
                position: absolute;
                top: 0.2rem;
                right: 0.1rem;
                background-color: #ff461d;
                @include sc(0.5rem,#fff);
                border: 0.025rem solid #ff461d;
                border-radius: 50%;
                line-height: 0.6rem;
                text-align: center;
                min-width: 0.6rem;
                font-family: Helvetica Neue,Tahoma,Arial;
            }
            &.activity_menu{
                background: #fff;
                border-left-color: $blue;
                span:nth-of-type(1){
                    font-weight: 700;
                }
            }
        }
    }
    .menu_right{
        flex: 1;
        overflow-y: auto;
        width: 100%;
        .menu_detail_header{
            padding: 0.4rem;
            @include fj;
            align-items: center;
            .menu_detail_header_left{
                width: 11rem;
                overflow: hidden;
                .menu_item_title{
                    @include sc(0.7rem,#666);
                    font-weight: bold;
                }
                .menu_item_description{
                    width: 30%;
                    @include sc(0.5rem,#666);
                }
            }
            .menu_detail_header_right{
                @include wh(1rem,1rem);
                @include bis('../../../assets/imgs/icon_point.png');
                background-size: 50% 0.4rem;
                background-position: right center;
            }
            .description_tip{

            }
        }
        .menu_detail_list{
            background: #fff;
            padding: 0.6rem 0.4rem;
            border-bottom: 0.025rem solid #f8f8f8;
            overflow: hidden;
            .menu_detail_link{
                width: 100%;
                display: flex;
                position: relative;
                .menu_food_img{
                    margin-right: 0.4rem;
                    img{
                        @include wh(2rem,2rem);
                        display: block;
                    }
                }
                .menu_food_description{
                    flex: 1;
                    .food_description_head{
                        @include fj;
                        align-items: center;
                        .description_foodname{
                            @include sc(0.65rem,#333);
                        }
                        .attributes_ul{
                            display: flex;
                            li{
                                font-size: 0.3rem;
                                height: 0.6rem;
                                line-height: 0.35rem;
                                padding: .1rem 0.2rem;
                                border: 1px solid #666;
                                border-radius: 0.3rem;
                                margin-right: .1rem;
                                transform: scale(.8);
                                span{
                                    white-space: nowrap;
                                    border: 0.025rem solid transparent;
                                    color: rgb(240, 115, 115);
                                }
                            }
                            .attribute_new{
                                position: absolute;
                                top: 0;
                                left: 0;
                                background-color: #4cd964;
                                @include wh(2rem, 2rem);
                                display: flex;
                                align-items: flex-end;
                                transform: rotate(-45deg) translate(0.1rem, -2.1rem);
                                border: none;
                                border-radius: 0;
                                span{
                                    @include sc(.4rem, #fff);
                                    text-align: center;
                                    flex: 1;
                                    transform: scale(0.8) translate(0.1rem, -.1rem);
                                }
                            }
                            
                        }
                        
                    }
                    .food_description_content{
                        @include sc(0.5rem,#888);
                        padding: 0.1rem 0;
                    }
                    .food_description_sale_rating{
                        @include sc(0.5rem,#333);
                        padding: 0.1rem 0;
                    }
                    .food_activity{
                        line-height: 0.4rem;
                        span{
                            padding: 0.08rem;
                            font-size: 0.35rem;
                            display: inline-block;
                            transform: scale(.8);
                            transform-origin:left;
                            border: 0.025rem solid currentColor;
                        }
                    }
                }
            }
            .menu_detail_footer{
                margin-left: 2.4rem;
                margin-top: 0.4rem;
                @include fj;
                .food_price {
                    font-size: 0;
                    span{
                        color: #ff461d;
                    }
                    span:nth-child(1){
                        font-size: 0.5rem;
                    }
                    span:nth-child(2){
                        font-size: 0.7rem;
                        margin-right: 0.3rem;
                    }
                    span:nth-child(3){
                        @include sc(0.5rem,#666);
                    }
                }
            }
        }         
    }
}
.show_delete_tip{
    position: absolute;
    @include center;
    background: #666;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    padding: 0.5rem 0.6rem;
    font-size: 0.6rem;
}
.fade-enter,.fade-leave-to{
    opacity: 0;
}
.fade-enter-active,.fade-leave-active{
    transition: opacity 0.3s
}

</style>